
import Taro from "@tarojs/taro";
import {
  View
} from "@tarojs/components";
import "./index.scss";
import { AtIndexes, AtSearchBar } from "taro-ui";
import { useState } from "react";
import { cities } from './config'


interface IProps {
  show: boolean
  callback: (val: string) => void
}
export const CityPicker = (props: IProps) => {
  let scrollFn: any;
  const { show, callback } = props
  const [searchValue, setSearchValue] = useState('')

  const handleActionClick = () => {
    scrollFn && scrollFn(searchValue)
    // callback(searchValue)
  }
  return (
    <View style={{ height: '100vh', position: 'absolute', left: 0, right: 0, top: 0, zIndex: 1, display: show ? 'block' : 'none' }}>
      {/* <AtIndexes
        onClick={(item) => {
          setSearchValue(item.name)
          callback(item.name)
        }}
        list={cities}
        onScrollIntoView={fn => {
          scrollFn = fn
        }}
      >
        <View className='custom-area'>
          <AtSearchBar placeholder='跳转到指定Key'
            value={searchValue}
            onChange={(v) => setSearchValue(v)}
            onActionClick={handleActionClick} />
        </View>
      </AtIndexes> */}
    </View>
  );
}

